<template>
  <transition name="page">
    <div class="wrapper">
      <component-back :title="title"></component-back>
      <div class="opinion">
        <div class="title">请填写您遇到的问题或提出宝贵建议</div>
        <textarea class="textarea"
                  placeholder="请填写您遇到的问题"
                  ref="content"></textarea>
      </div>
      <div class="recommend">
        <div class="recommend-title">相关推荐</div>
        <wx-upload-img @upload="handleUpload"></wx-upload-img>
        <div class="user-name"
             border-bottom-1px>
          <div class="type">姓名</div>
          <input type="text"
                 placeholder="请输入您的姓名"
                 ref="name">
        </div>
        <div class="phone"
             border-bottom-1px>
          <div class="type">电话</div>
          <input type="text"
                 placeholder="请输入您的电话号码"
                 ref="phone">
        </div>
        <p class="message">{{message}}</p>
      </div>
      <compontne-button :content="submit"
                        @submit="handleSubmit"
                        class="submit"></compontne-button>
    </div>
  </transition>
</template>

<script>
import ComponentBack from 'common/back'
import CompontneButton from 'common/button'
import WxUploadImg from '../components/wxUploadImg'
import commonWx from '@/assets/js/wx'
import {
  Toast
} from 'vant'
export default {
  name: 'MeOpinion',
  components: {
    ComponentBack,
    CompontneButton,
    WxUploadImg
  },
  data () {
    return {
      title: '意见反馈',
      submit: '提交',
      imgList: [],
      checked: false,
      message: ''
    }
  },
  methods: {
    handleSubmit () {
      this.check()
      const checked = this.checked
      if (checked) {
        if (this.$refs.phone.value !== '') {
          const flag = this.checkPhone()
          return flag ? this.getOpinion() : false
        } else {
          this.getOpinion()
        }
      }
    },
    checkPhone () {
      const REG = /^1(3|4|5|7|8)\d{9}$/
      const phone = this.$refs.phone.value
      if (REG.test(phone) === false) {
        this.message = '电话号码格式错误'
        return false
      } else {
        return true
      }
    },
    check () {
      if (this.imgList.length === 0 && this.$refs.phone.value === '' && this.$refs.name.value === '' && this.$refs.content.value === '') {
        Toast({
          message: '请输入内容',
          duration: 1000,
          forbidClick: true
        })
        return false
      } else {
        this.checked = true
      }
    },
    getOpinion () {
      const images = this.imgList
      const phone = this.$refs.phone.value
      const name = this.$refs.name.value
      const content = this.$refs.content.value
      this.$api.person.postOpinion({ images, phone, name, content })
        .then(this.getOpinionSucc)
    },
    getOpinionSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const msg = res.msg
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
        setTimeout(() => {
          this.$router.push({
            path: '/me'
          })
        }, 2000)
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    upLoadImg (localData) {
      this.imgList = []
      this.imgList.push(localData)
    },
    handleUpload (list) {
      list.map((item) => {
        commonWx.getLocalImgData(item, this.upLoadImg)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper >>> .submit
  position static

.wrapper
  width 100%
  height 100vh
  background-color #fff

.opinion
  padding()
  padding-top 88px

  .title
    font-size $shop_name
    font-weight 500
    color $common_fz_color
    line-height 93px

  .textarea
    width 100%
    height 350px
    background $space
    border-radius 20px
    padding()
    padding-top 10px
    border none
    resize none
    font-size $address
    font-weight 400
    color $common_fz_color
    margin-bottom 16px

.recommend
  padding()
  width 100%
  background-color #fff

  .recommend-title
    font-size $shop_name
    font-weight 500
    color $common_fz_color
    line-height 78px

.user-name, .phone
  width 100%
  height 110px
  display flex
  align-items center
  padding()
  font-size $shop_name
  font-weight 500
  color $common_fz_color
  background-color #fff

  .type
    flex 1
    margin-right 20px

  input
    height 100%
    flex 1
    text-align right
    border none
    background-color #fff

.message
  font-size $address
  color $marker_color
  padding()

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
